<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 12 Spine</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
<script>
// create an array of assets to load
var assetsToLoader = ["../../logo_small.png", "data/dragon.json"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded
//begin load
loader.load();
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
// create a renderer instance
var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
// set the canvas width and height to fill the screen
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
var dragon = null;
function onAssetsLoaded()
{
/* instantiate the spine animation */
dragon = new PIXI.Spine("data/dragon.json");
dragon.skeleton.setToSetupPose();
dragon.update(0);
dragon.autoUpdate = false;
/* create a container for the spine animation and add the animation to it */
var dragonCage = new PIXI.DisplayObjectContainer();
dragonCage.addChild(dragon);
/* measure the spine animation and position it inside its container to align it to the origin */
var localRect = dragon.getLocalBounds();
dragon.position.set(-localRect.x, -localRect.y);
/* now we can scale, position and rotate the container as any other display object */
var scale = Math.min((window.innerWidth * 0.7) / dragonCage.width, (window.innerHeight * 0.7) / dragonCage.height);
dragonCage.scale.set(scale, scale);
dragonCage.position.set((window.innerWidth - dragonCage.width) * 0.5, (window.innerHeight - dragonCage.height) * 0.5);
/* add the container to the stage */
stage.addChild(dragonCage);
/* once position and scaled, set the animation to play */
dragon.state.setAnimationByName(0, "flying", true);
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = window.innerWidth
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = window.innerHeight - 70;
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
requestAnimFrame(animate);
}
function animate() {
requestAnimFrame( animate );
/* update the spine animation, only needed if autoupdate is set to false */
dragon.update(0.01666666666667); // HARDCODED FRAMERATE!
renderer.render(stage);
}
</script>
</body>
</html>
